<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>办事详情</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./layui/css/layui.css" />
    <link rel="stylesheet" href="./css/zcdxDetail.css" />
    <script src="./script/vue.js"></script>
    <script src="./script/axios.js"></script>
</head>
<body>
    <div class="ET_header" id="ET_header">
        <div class="title">
            办事详情
        </div>
    </div>
    <div class="ET_container" id="app">
        <div class="wrap_title" id="pR_NAME">
        </div>
        <!-- 基本要素 -->
        <div class="wrap_part">
            <div class="part_title">
                基本要素
            </div>
            <div class="part_main">
                <div class="item_line"></div>
                <div class="item_text">
                    服务对象：<span id="serviceFor">{{matterBelongFun(form.matter_belong)|| '-'}}</span>
                </div>
                <div class="item_text">
                    办件类型：<span id="type">{{form.handle_type?form.handle_type.label?form.handle_type.label:'-':'-'}}</span>
                </div>
                <div class="item_text">
                    事项时限：<span id="pR_TIMELIMIT">{{form.timelimit|| '-'}}个工作日</span>
                </div>
                <div class="item_text">
                    办理时间： <span id="manageDate" v-html="form.handle_date|| '-'"></span>
                </div>
                <div class="item_text">
                    办理地点：<span id="manageAddr" v-html="form.handle_address|| '-'"></span>
                </div>
                <div class="item_text">
                    咨询电话：<span id="pE_TEL">{{form.telephone|| '-'}}</span>
                </div>
                <div class="moreinfo">
                    <div class="item_text">
                        实施编码：<span id="actionNO">{{form.action_no || '-'}}</span>
                    </div>
                    <div class="item_text">
                        基本编码：<span id="baseNo">{{form.base_no || '-'}}</span>
                    </div>
                    <div class="item_text">
                        承诺办结时限：<span id="promiseTime">{{form.promise_date || '-'}}</span>
                    </div>
                    <div class="item_text">
                        办件公示：<span id="managePublicity">{{form.publicity || '-'}}</span>
                    </div>
                    <div class="item_text">
                        主事项：<span id="pM_NAME">{{form.master_matterName||'-'}}</span>
                    </div>
                    <div class="item_text">
                        事项类别：<span id="kind">{{form.category?form.category.label : '-'}}</span>
                    </div>
                    <div class="item_text">
                        行政审批主体：<span id="approveSub">{{form.approval_subject || '-'}}</span>
                    </div>
                    <div class="item_text">
                        业务主管部门：<span id="businessDept">{{form.business_unit || '-'}}</span>
                    </div>
                    <div class="item_text">
                        适用范围：<span id="range">{{form.applicative_scope || '-'}}</span>
                    </div>
                    <div class="item_text">
                        权限划分：<span id="roleDivide">{{form.authority_division || '-'}}</span>
                    </div>
                    <div class="item_text">
                        投诉电话：<span id="superviseTelephone">{{form.complaints_phone || '-'}}</span>
                    </div>
                    <div class="item_text">
                        行使层级：<span id="performLevel">{{form.perform_level?form.perform_level.label?form.perform_level.label:'-' : '-'}}</span>
                    </div>
                    <div class="item_text">
                        行使内容：<span id="performContent">{{form.perform_content || '-'}}</span>
                    </div>
                    <div class="item_text">
                        扶持标准：<span id="standards" v-html="form.standards|| '-'"></span>
                    </div>
                    <div class="item_text">
                        是否涉及联办：<span id="whetherFreder">{{form.is_joint?form.is_joint.label : '-'}}</span>
                    </div>
                    <div class="item_text">
                        联办部门：<span id="federalAgencies">{{form.joint_unit || '-'}}</span>
                    </div>
                    <div class="item_text">
                        是否数量限制：<span id="whetherQuantity">{{form.is_quantity?form.is_quantity.label : '-'}}</span>
                    </div>
                    <div class="item_text">
                        是否物流快递：<span id="whetherExpress">{{form.is_quantity?form.is_quantity.label : '-'}}</span>
                    </div>
                    <div class="item_text">
                        中介服务：<span id="intermediary">{{form.intermediary || '-'}}</span>
                    </div>
                    <div class="item_text">
                        是否收费：<span id="whetherCharge">{{form.is_charge?form.is_charge.label : '-'}}</span>
                    </div>
                    <div class="item_text">
                        通办范围：<span id="scope">{{form.universal_scope?form.universal_scope.label?form.universal_scope.label:'-' : '-'}}</span>
                    </div>
                    <div class="item_text">
                        网上支付：<span id="onlinePay">{{form.onlinepay || '-'}}</span>
                    </div>
                    <div class="item_text">
                        预约办理：<span id="makeUp">{{form.is_reservation?form.is_reservation.label : '-'}}</span>
                    </div>
                    <div class="item_text">
                        预约途径：<span id="makeUpPath">{{form.reservation_path || '-'}}</span>
                    </div>
                    <div class="item_text">
                        运行系统：<span id="operationSys">{{form.operation_system?form.operation_system.label||'-' : '-'}}</span>
                    </div>
                    <div class="item_text">
                        系统名称：<span id="systemName">{{form.system_name || '-'}}</span>
                    </div>
                    <div class="item_text">
                        办事链接：<span id="pR_URL">{{form.matter_url || '-'}}</span>
                    </div>
                    <div class="item_text">
                        浏览人次：<span id="hits">{{form.hits || '-'}}</span>
                    </div>
                </div>
                <div class="item_btn zk_btn" onclick="getOpen(this)">
                    展开更多
                </div>
                <div class="item_btn sq_btn" onclick="getClose(this)">
                    收起
                </div>
            </div>
        </div>
        <!-- 受理条件 -->
        <div class="wrap_part">
            <div class="part_title">
                受理条件
            </div>
            <div class="part_main">
                <div class="item_line"></div>
                <div class="item_text" id="condition">
                    {{form.accept_condition || '暂无'}}
                </div>
            </div>
        </div>
        <!-- 办理材料 -->
        <div class="wrap_part">
            <div class="part_title">
                办理材料
            </div>
            <div class="part_main material">
                <div class="bgStyle commonStyle" v-for="(item,index) in form.child_material" :key="index">
                    <div class="item_text_bloc">
                        {{item.dataMap.material_name || '-'}}
                    </div>
                    <div class="item_text item_text_gray">
                        材料准备要点： {{item.dataMap.material_points || '-'}}
                    </div>
                    <div class="item_text">
                        原件：
                        <span class="color_red" style="margin-right: 10px;">
                            <td>{{item.dataMap.original_number || '-'}}份
                        </span>
                        复印件： 
                        <span>
                            {{item.dataMap.copy_number || '-'}}份
                        </span>
                        <span class="color_red" style="margin-left: 20px;">
                            {{item.dataMap.is_electronic.value=='true'?'需要电子材料': '不需要电子材料'}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 办理流程 -->
        <div class="wrap_part">
            <div class="part_title">
                办理流程
            </div>
            <div class="part_main flow">
                <div class="bgStyle commonStyle" v-for="(item,index) in form.child_flow" :key="index">
                    <div class="item_text">
                        环节名称：{{item.dataMap.link|| '-'}}
                    </div>
                    <div class="item_text">
                        审查标准：{{item.dataMap.standard || '暂无'}}
                    </div>
                    <div class="item_text">
                        步骤：
                        <span class="color_red">
                            {{item.dataMap.step|| '暂无'}}
                        </span>
                    </div>
                    <div class="item_text">
                        办理结果：
                        <span>
                            {{item.dataMap.handle_result || '暂无'}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 收费情况 -->
        <div class="wrap_part">
            <div class="part_title">
                收费情况
            </div>
            <div class="part_main situation">
                <div class="bgStyle commonStyle">
                    <div class="item_text">
                        收费标准： 
                        <span class="color_red" id="chargeNorm">
                            {{form.charge_standard|| '暂无'}}
                        </span>
                        收费依据： 
                        <span class="color_red" id="chargeAccording">
                            {{form.charge_according|| '暂无'}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 法定依据 -->
        <div class="wrap_part">
            <div class="part_title">
                法定依据
            </div>
            <div class="part_main">
                <div class="item_line"></div>
                <div class="item_text" id="legaldata"> 
                    {{form.legal_basis || '暂无'}}
                </div>
            </div>
        </div>
    </div>
    <script src="./script/jquery.min.js"></script>
    <script src="./script/api.js"></script>
    <script>
        $('.part_main').find('.moreinfo').hide();
        $('.part_main').find(".zk_btn").show();
        $('.part_main').find(".sq_btn").hide();

        function getOpen(obj){
            $('.part_main').find('.moreinfo').show();
            $('.part_main').find(".zk_btn").hide();
			$('.part_main').find(".sq_btn").show();
        }

        function getClose(obj){
            $('.part_main').find('.moreinfo').hide();
            $('.part_main').find(".zk_btn").show();
            $('.part_main').find(".sq_btn").hide();
        }
        
        function getQueryVariable(variable) {
            var query = window.self.location.href.split('?')[1];
            console.log(query)
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }
        let pr_id = getQueryVariable('value');
        console.log(pr_id)
        new Vue({
			el: '#app',
			data() {
				return {
                    form:{}
				}
			},
			created() {
                let pr_id = this.getQueryVariable('value');
                console.log(pr_id);
                this.getBasicInfo(pr_id)
			},
			mounted() {
			},
			methods: {
                getQueryVariable(variable) {
                    var query = window.self.location.href.split('?')[1];
                    var vars = query.split("&");
                    for (var i = 0; i < vars.length; i++) {
                        var pair = vars[i].split("=");
                        if (pair[0] == variable) {
                            return pair[1];
                        }
                    }
                    return (false);
                },
                matterBelongFun: function(data) {
                    var str = ''
                    if (data) {
                      for (var i = 0; i < data.length; i++) {
                        str = str + data[i].label + '/'
                      }
                    }
                    return str.substring(0, str.length - 1)
                },
                async getBasicInfo(id){
                    const searchData = {
                        formId:"446899447134683138",
                        appId:"441529635569926146",
                        metaDataKey:"pa_matter_baseinfo",
                        method:"detail",
                        params:{
                            id:id
                        }
                    }
					const res = await axios.post(
            		  "/app/data/query",
            		  searchData,
            		)
                    const res_GetProceedingEssentials = res.data
                    console.log("基本信息",res_GetProceedingEssentials);
                    this.form = res_GetProceedingEssentials.data
                    if (this.form.master_matter) {
                        $('#pR_NAME').html(this.form.matter_name);
                      this.masterMatterFun(this.form.master_matter)

                    }
					const res2 = await axios.get('/matter/Matter/GetMatterFlowList?matter_id=' + id)
                    const resFlow = res2.data
                    if (resFlow.code == 200) {
                        this.form.child_flow = resFlow.data.map((item, index) => {
                          return {
                            id: item.id,
                            dataMap: item
                          }
                        })                        
                    }
                },
                // 主事项
                async masterMatterFun(id) {
                  // 获取主事项名称
                  let data = {
                    formId: '446899433566371842',
                    appId: '441529635569926146',
                    metaDataKey: 'pa_matter_masterinfo',
                    method: 'detail',
                    params: { id: id }
                  }
                  const res = await axios.post('/app/data/query', data)
                  this.$set(
                    this.form,
                    'master_matterName',
                    res.data.data.pm_name || '-'
                  )
                },
			},
		})	        
    </script>
</body>
</html>